<template>
  <div class="text-panda-text-dark">
    <div class="line-height-30px bg-panda-dark-dark">
      <q-btn icon="close" size="sm" @click="abort_playrules_modify" class="w30x" />
      <span class="text-panda-text-light">{{ showTitle }}</span>
    </div>
    <q-scroll-area style="height: calc(100% - 99px)">
      <q-markup-table
        :separator="separator"
        dense
        wrap-cells
        class="bg-panda-base-dark full-width full-height lh30x text-panda-text-light panda-markup-table-border-transparent q-mb-sm"
      >
        <thead>
          <tr v-for="(item, index) in list" :key="index" class="row full-height">
            <th class="col-2">{{ item.title }}</th>
            <td class="lh24x col-10">
              <q-input
                v-if="item.type === 'input'"
                filled
                rounded
                dense
                clearable
                maxlength="30"
                v-model="queryform_form.a"
                class="text-panda-text-dark w230x line-height-30px"
                color="panda-text-dark"
                bg-color="panda-light-light"
              ></q-input>
              <q-select
                v-if="item.type === 'select'"
                filled
                rounded
                color="panda-text-light"
                bg-color="panda-light-light"
                v-model="queryform_form.a"
                hide-bottom-space
                emit-value
                map-options
                dense
                options-dense
                class="line-height-30px w110x"
                :input-style="{ backgroundColor: '#ff0000' }"
                popup-content-class="bg-panda-light-light text-panda-text-light"
              ></q-select>
            </td>
          </tr>
        </thead>
      </q-markup-table>
      <div class="text-panda-text-light q-py-lg border-top">
        <span class="ml33x text-panda-text-dark d-block q-mb-sm">玩法数据商关联</span>
        <div class="row item-center q-mb-sm">
          <span class="col-2 pl49x">BC</span>
          <span class="panda-px-16px">上半场-进球大小</span>
        </div>
        <div class="row items-center">
          <div class="row col-2">
            <q-checkbox
              class="line-height-30px ml33x"
              color="primary"
              v-model="queryform_form.c"
              true-value="1"
              label="BC"
            />
          </div>
          <q-input
            filled
            rounded
            dense
            clearable
            maxlength="30"
            v-model="queryform_form.c"
            class="text-panda-text-dark w230x line-height-30px panda-px-16px"
            color="panda-text-dark"
            bg-color="panda-light-light"
          ></q-input>
          <span
            v-if="queryform_form.c"
            class="q-mx-sm panda-btn-table-handle"
            @click="$emit('open_play_list')"
          >设置</span>
        </div>
      </div>
      <div class="text-panda-text-light q-pt-lg border-top">
        <span class="ml33x text-panda-text-dark d-block q-mb-sm">玩法选项关联</span>
        <div class="row items-center ml33x">
          <q-radio
            v-model="queryform_form.d"
            v-for="(item,index) in [{code: 1, fullName: 'sdf1'}, {code: 2, fullName: '1sdf1'}]"
            :key="index"
            :val="item.code"
            :label="item.fullName"
          />
        </div>
        <q-table
          :data="[{name: 1, key: 1}]"
          :columns="[{label: '1', name: '1'},{label: '2', name: '2'}, {label: '3', name: '3'}]"
          separator="cell"
          class="bg-panda-base-dark text-panda-text-light panda-table full-width"
          table-header-class="panda-table"
          row-key="name"
          dense
          hide-bottom
        ></q-table>
      </div>
    </q-scroll-area>
    <editBtn ok_text="保存并生成" @save="save" />
  </div>
</template>

<script>
import editBtn from "src/pages/setting/playrules/edit/component/component/editBtn.vue";
export default {
  components: {
    editBtn
  },
  props: {
    title: {
      default: "新增玩法"
    },
    list: {
      default() {
        return [
          {
            title: "比赛场地",
            code: "1",
            type: "input",
            content:
              "sdfsdasdddddddddddddddddddddddddddddddd士大夫士大夫士大夫士大夫十分士大夫十ddddd士大夫士大夫士大夫士大夫十分士大夫十ddddd士大夫士大夫士大夫士大夫十分士大夫十ddddd士大夫士大夫士大夫士大夫十分士大夫十ddddd士大夫士大夫士大夫士大夫十分士大夫十dddd士大夫士大夫士大夫士大夫十分士大夫十分萨芬手动阀手动阀士大夫士大夫撒旦飞洒地方啊实打实的fsadsdf"
          },
          {
            title: "项目名称",
            code: "2",
            type: "input",
            content: "sdfsdfsadsdf"
          },
          {
            type: "select",
            code: "3",
            title: "多盘口值",
            content: "sdfsdfsadsdf"
          }
        ];
      }
    }
  },
  data() {
    return {
      showTitle: this.title,
      queryform_form: { c: "" }
    };
  },
  methods: {
    save() {},
    abort_playrules_modify () {
      this.$router.push({name: 'setting_playrules'})
    }
  }
};
</script>